<template>
  <div>
    <!--    面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><b>题目管理</b></el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/FindSet' }">题目集</el-breadcrumb-item>
      <el-breadcrumb-item><span style="color: #545c99">创建题目集</span></el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <h1>创建题目集</h1>
      <el-row>
        <el-col :span="14">
          <el-button type="text" @click="SeeAllSet">
            <i class="el-icon-magic-stick"></i>查看我所创建的所有题目集
          </el-button>
        </el-col>
        <el-col :offset="6" :span="4">
          <el-button
            plain
            @click="tishiMsg" type="warning" size="medium">
            提醒
          </el-button>
        </el-col>
      </el-row>
<!--      <el-col :span="7">-->
<!--        <el-link href="#/FindTest"><i class="el-icon-view el-icon&#45;&#45;right"></i>查询题库</el-link>-->
<!--      </el-col>-->
      <el-divider content-position="right"><i class="el-icon-edit"></i></el-divider>
      <el-row :gutter="20">
        <el-col :span="10">
          <span style="color: gray"><i class="el-icon-user"></i> 当前创建题目集者: <el-tag> {{this.AddSetForm.teachName}}</el-tag></span>
        </el-col>
        <el-col :span="12">
          <span style="color: gray"><i class="el-icon-s-order"></i> 该教师工号：<el-tag type="info"> {{this.AddSetForm.teachId}}</el-tag></span>
        </el-col>
      </el-row>
      <br>
      <el-form status-icon :model="AddSetForm" ref="AddSetFormRef">
        <el-form-item label="题目集名字" label-width="100px" prop="setName" required>
          <el-input v-model="AddSetForm.setName" autocomplete="off" placeholder="请输入题目集名字"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间" label-width="100px" prop="startTime" required>
              <el-date-picker
                v-model="AddSetForm.startTime"
                type="datetime"
                placeholder="选择开始时间"
                default-time="12:00:00"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" label-width="120px" prop="overTime" required>
              <el-date-picker
                v-model="AddSetForm.overTime"
                type="datetime"
                placeholder="选择结束时间"
                default-time="23:00:00"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <br>
      <br>
      <div style="text-align: center; margin: auto;">
        <el-button class="new_btn" @click="CreateSet">
          <svg class="icon_add" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <polygon id="路径" fill="#FFFFFF" points="11.34223 8.55450006 11.34223 1.52678484 8.5311359 1.52678484 8.5311359 8.55450006 1.50342068 8.55450006 1.50342068 11.3655941 8.5311359 11.3655941 8.5311359 18.3933093 11.34223 18.3933093 11.34223 11.3655941 18.3699652 11.3655941 18.3699652 8.55450006"></polygon>
          </svg>
          创 建
        </el-button>
      </div>
      <br>
      <el-divider>以下是刚刚创建的最新一条题目集信息</el-divider>
      <el-row :gutter="20">
        <el-col :offset="11">
          <p style="color: slategray" v-if="!this.showInfo">暂无数据</p>
        </el-col>
      </el-row>
      <el-table
        v-if="this.showInfo" :data="NewSetForm" :stripe="true">
        <el-table-column fixed type="index" label="#"></el-table-column>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column align="center" prop="setName" label="题目集名称" width="130px"></el-table-column>
        <el-table-column align="center" prop="teachName" label="创建者" width="100px">
          <template slot-scope="scope">
            <el-popover>
              <el-col :span="13">
                <el-tag>创建者工号</el-tag>
              </el-col>
              <el-tag type="success"> {{scope.row.teachId}}</el-tag>
              <div slot="reference">
                {{scope.row.teachName}}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" prop="startTime" label="开始时间">
          <template slot-scope="scope">
            <span style="color: #545c99">
              {{scope.row.startTime.substring(0,16)}}
            </span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" prop="overTime" label="截止时间">
          <template slot-scope="scope">
            <span v-if="Date.parse(scope.row.overTime) > new Date()" style="color: #795da3">
              {{scope.row.overTime.substring(0,16)}}
            </span>
            <span v-else style="color: #df5000">
              {{scope.row.overTime.substring(0,16)}}
            </span>
          </template>
        </el-table-column>
        <!--        操作-->
        <el-table-column align="center" label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <!--              删除题目集按钮-->
            <el-tooltip effect="dark" content="删除题目集" placement="bottom">
              <el-button type="danger" icon="el-icon-delete" size="mini" :enterable="false" @click="removeSetById(scope.row.setId,scope.row.teachId)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <br>
    </el-card>
    <el-dialog
      title="我创建的所有题目集"
      :visible.sync="openToSee"
      width="50%" class="role-mask">
      <!--      内容主体区域-->
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        :data="MySetForm">
        <el-table-column prop="setId" label="序号" width="60px"></el-table-column>
        <el-table-column prop="setName" label="题目集名称" width="120"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <el-table-column prop="overTime" label="截止时间"></el-table-column>
      </el-table>
      <!--      底部区域-->
      <span slot="footer" class="dialog-footer" style="padding-right: 30%">
        <el-col :span="8">
          <el-link href="#/FindSet" style="color:dodgerblue"><i class="el-icon-magic-stick"></i>详情页面</el-link>
        </el-col>
        <el-button class="white_btn" @click="openToSee=false">关闭</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AddSet',
  data () {
    return {
      // 创建题目集
      AddSetForm: {
        setName: '',
        teachId: localStorage.getItem('username'),
        teachName: localStorage.getItem('name'),
        startTime: '',
        overTime: ''
      },
      openToSee: false,
      MySetForm: [],
      showInfo: false,
      NewSetForm : [{
        setName: '',
        teachId: localStorage.getItem('username'),
        teachName: localStorage.getItem('name'),
        startTime: '',
        overTime: '',
        setId:''
      }],
      loading: true,
    }
  },
  created () {
  },
  methods: {
    CreateSet () {
      this.$refs.AddSetFormRef.validate(async valid => {
        console.log(this.AddSetForm)
        if (!valid) return
        const { data: res } = await this.$http.post('/set/create/', this.AddSetForm)
        if (res.status !== 200) {
          return this.$message.error('创建题目集失败!')
        }
        this.$message.success('创建题目集成功!')
        this.showInfo = true
        this.NewSetForm[0] = this.AddSetForm
        this.NewSetForm.setId = res.data.setId

        console.log(this.NewSetForm)
      })
    },
    async SeeAllSet () {
      this.openToSee = true
      const { data: res } = await this.$http.get('/set/findByTeach/' + localStorage.getItem('username'))
      if (res.status !== 200) {
        return this.$message.error('获取题目集失败!')
      }
      this.MySetForm = res.data
      if (this.MySetForm.length === res.data.length){
        this.loading = false
      }
      console.log(this.MySetForm)
    },
    tishiMsg () {
      const h = this.$createElement
      this.Notification({
        title: '小提示',
        message: h('b', { style: 'color: teal;line-height: 18px;' }, '题目集创建时间默认为12：00，截止时间默认为23：00哦！（可修改）'),
        duration: 0
      })
    },
    // 删除题目集
    async removeSetById (id,teacher) {
      const confirmResult = await this.$confirm('此操作将永久删除该题目集 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete('/set/delete/',{data:{setId:id,teachId:teacher}} )
      if (res.status !== 200) {
        return this.$message.error(res.msg)
      }
      this.$message.success('删除题目集成功!')
      this.showInfo = false
      this.$refs.AddSetFormRef.resetFields()
    },
  }
}
</script>

<style>
  /* 顶部下划线 */
  .role-mask .el-dialog__header{
    border-bottom: 2px solid cornflowerblue;
    padding: 20px;
  }
  .role-mask .el-dialog__title{
    font-size: 19px;
    color: #3A68C6;
  }
</style>
